EnviShare

Creative Environment & Ecology Template.

Installation

Follow the steps below to get started with EnviShare is a Creative Environment & Ecology HTML5 Template :

  1. Open the Package/EnviShare Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
  3. Make sure you have upload the required files and folders listed below:
    • EnviShare HTML/assets - Stylesheets, JavaScript, Fonts etc Folder 
    • EnviShare HTML/assets/images - Images Folder  
    • EnviShare HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now ready to go..! Start adding your Content and show off your Brand New Website.

Features At A Glance

  1. HTML5 & CSS3 & jQuery
  2. Modern And Creative Design
  3. Universal menu
  4. 100% Responsive
  5. Well documented
  6. Complete SASS files
  7. Bootstrap 4.3.1
  8. Fontawesome Used
  9. Google Font Used
  10. Lightcase Used
  11. Aos Used
  12. Google Map
  13. Eye Catching Design
  14. W3C Valid Code

HTML Structure

EnviShare has follows a simple coding structure. here is the sample:

 

	
 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EnviShare</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="EnviShare Template is a Creative Environment &	
	Ecology HTML5 EnviShare Template">
        <meta name="keywords" content="EnviShare, HTML5, Environment & Ecology, Template">
        <meta name="author" content="CodexCoder">

        <link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:300,400,500,700,900&display=swap" 
	rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" 
	rel="stylesheet">

        <!-- <link rel="shortcut icon" type="image/x-icon" href="assets/images/x-icon.png"> -->

        <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
        <!-- <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-grid.css"> -->
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="assets/css/all.min.css">
        <link rel="stylesheet" type="text/css" href="assets/css/lightcase.css">
        <link rel="stylesheet" type="text/css" href="assets/flaticon/flaticon.css">
        <link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css">
        <link rel="stylesheet" type="text/css" href="assets/css/slick.css">
        <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    </head>

	
    <body class="p-0">
        <div class="search-area">
            <div class="search-input">
                <div class="search-close">
                    <span></span>
                    <span></span>
                </div>
                <form>
                    <input type="text" name="text" placeholder="*Search Here">
                </form>
            </div>
        </div>
        <!-- mobile-nav section start here -->
        <div class="mobile-menu">
            <nav class="mobile-header primary-menu d-lg-none">
                <div class="header-logo">
                    <a href="index.html" class="logo"><img src="assets/images/logo/01.png" alt="logo"></a>
                </div>
                <div class="header-bar" id="open-button">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
            <nav class="menu">
                <div class="mobile-menu-area d-lg-none">
                    <div class="mobile-menu-area-inner" id="scrollbar">
                        <ul class="m-menu">
                            <li><a class="active" href="#">Home</a>
                                <ul class="m-submenu">
                                    <li><a class="active" href="index.html">Home page one</a></li>
                                    <li><a href="index-2.html">Home page two</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Pages</a>
                                <ul class="m-submenu">
                                    <li><a href="about.html">about</a></li>
                                    <li>
                                        <a href="#">Gallery</a>
                                        <ul class="m-submenu">
                                            <li><a href="gallery.html">Gallery</a></li>

	

	
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star-half"></i></li>
                                                </ul>
                                                <p>(Review 3)</p>
                                            </div>
                                            <span class="price"><del>$45.99</del></span>
                                            <span class="price">$25.99</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="post-item">
                                <div class="post-title">
                                    <h3>Farm Gallery</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="container">
                    <div class="section-wrapper">
                        <p class="text-center">&copy; 2019 <a href="index.html">EnviShare</a>.All Rights Reserved By 
			<a href="#">LabArtisan</a></p>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer section start here -->
        <!-- scrollToTop start here -->
        <a href="#" class="scrollToTop"><i class="flaticon-chevron-up"></i></a>
        <!-- scrollToTop ending here -->


        <script src="assets/js/jquery.js"></script>
        <script src="assets/js/fontawesome.min.js"></script>
        <script src="assets/js/jquery.counterup.min.js"></script>
        <script src='assets/js/jquery.easing.js'></script>
        <script src='assets/js/slick.min.js'></script>
        <script src="assets/js/lightcase.js"></script>
        <script src="assets/js/circular-countdown.js"></script>
        <script src="assets/js/jquery.countdown.min.js"></script>
        <script src="assets/js/waypoints.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/isotope.pkgd.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/theia-sticky-sidebar.js"></script>
        <script src="assets/js/swiper.min.js"></script>
        <script src="assets/js/functions.js"></script>
    </body>
</html>

	
 

 

CSS Structure

We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS Fiile Included

  • Animate css used
  • Bootstrap css used
  • Lightcase used
  • Swiper used
  • Favicon used
  • Fontawesome used
  • Aos css used
  • Slick used
  • Slick-theme used
  • Style css used
  • and some other necessary css files 
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
 
 
	
 

	Theme Name: EnviShare is a Creative Environment & Ecology HTML5 Template
	Theme URI: http://codexcoder.com/ 
	Author: codexcoder 
	Author URI: http://codexcoder.com/ 
	You can customize it easily according to your choice.It is suitable for your 
	Creative Environment & Ecology, or. EnviShare can be easily customized and it is well documented.; 
	Version: 1.0.0 
	License: GNU General Public License v2 or later 
	License URI: http://www.gnu.org/licenses/gpl-2.0.html 
	Tags: bio, charity, crowdfunding, eco, ecological, ecology, environment, environmental, green, green tech, natural, nature, nonprofit, organic, renewable.
	
	/*---------------------------------------------
	Table of CONTENT
	-----------------------------------------------
	01. Default CSS
	02. Header 
	03. Banner 
	04. Page Header
	05. Services
	06. About
	07. Videos
	08. Product
	09. Portfolio
	10. Sponsor
	11. Testimonial
	12. Pricing
	13. Team Member
	14. Histori
	15. Blog
	16. Offer
	17. G-Maps
	18. Footer
	-----------------------------------------------*/
	
 
 
 
	
 


    

  1. 

    .header-section .header-top {
    

    background: #5d9913; }
    

    .header-section.header-top.htop-area {
    

    justify-content: space-between;
    

    align-items: center; }
    

    .header-section.header-top.htop-area.htop-left.htop-information {
    

    margin: 0;
    

    justify-content: space-between; }
    

    .header-section.header-top.htop-area.htop-left.htop-informationli {
    

    color: #fff;
    

    font-size: 15px;
    

    margin-right: 40px;
    

    padding: 8px0; }
    

    .header-section.header-top.htop-area.htop-left.htop-informationli:last-child {
    

    margin-right: 0px; }
    

    .header-section.header-top.htop-area.htop-left.htop-informationlia {
    

    color: #fff; }
    

    .header-section.header-top.htop-area.htop-rightullia {
    

    color: #fff;
    

    font-size: 14px;
    

    margin-right: 15px; }
    

    .header-section.header-top.htop-area.htop-rightulli:last-childa {
    

    margin-right: 0; }
    

    .header-section .header-bottom .search-cart {
    

    padding-left: 40px;
    

    justify-content: flex-end; }
    

    .header-section.header-bottom.search-cartli {
    

    position: relative;
    

    margin-right: 20px;
    

    cursor: pointer; }
    

    .header-section.header-bottom.search-cartli.cartspan {
    

    width: 20px;
    

    height: 20px;
    

    line-height: 20px;
    

    border-radius: 50%;
    

    background: #5d9913;
    

    color: #fff;
    

    display: inline-block;
    

    top: -5px;
    

    right: -15px;
    

    font-size: 12px; }
    


    .banner.style-1.carousel.slide.carousel-inner.carousel-item {
    

    height: 100%; } }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .slider-content .slider-content-inner h1 {
    

    opacity: 1;
    

    margin-left: 0;
    

    -webkit-transition-duration: 2s;
    

    transition-duration: 2s; }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .slider-content .slider-content-inner .btn {
    

    transform: translateY(0px);
    

    opacity: 1; }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .slider-content .slider-content-inner .delay {
    

    -webkit-transition-delay: .4s;
    

    transition-delay: .4s; }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .slider-content .slider-content-inner .delay1 {
    

    -webkit-transition-delay: .05s;
    

    transition-delay: .05s; }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .slider-content .slider-content-inner .delay2 {
    

    -webkit-transition-delay: .77s;
    

    transition-delay: .77s; }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .slider-content .slider-content-inner .delay3 {
    

    -webkit-transition-delay: 1.11s;
    

    transition-delay: 1.11s; }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .slider-content .slider-content-inner .delay4 {
    

    -webkit-transition-delay: 1.555s;
    

    transition-delay: 1.555s; }
    

    .banner.style-1 .carousel.slide .carousel-inner .carousel-item.active .shape {
    

    bottom: 30px; }
    


    .footer-top {
    

    background: url(../../assets/css/bg-images/footer-bg.jpg);
    

    background-position: centertop;
    

    background-size: cover;
    

    padding-bottom: 300px!important; }
    

    @media (max-width: 767px) {
    

    .footer-top.col-lg-4.col-md-6:last-child.post-item {
    

    margin-bottom: 0px; } }
    

    @media (max-width: 767px) {
    

    .footer-top.post-item {
    

    margin-bottom: 50px; } }
    

    .footer-top.post-item.footer-logo {
    

    margin-bottom: 32px; }
    

    .footer-top.post-item.footer-locationli.icon-part {
    

    width: 30px; }
    

    .footer-top.post-item.footer-locationli.icon-parti {
    

    padding-top: 10px;
    

    color: #5d9913; }
    

    .footer-top.post-item.footer-locationli.content-part {
    

    width: calc(100%-30px); }
    

    .footer-top.post-item.footer-locationli.content-partp {
    

    margin-bottom: 0; }
    

    .footer-top.post-item.post-title {
    

    margin: 40px0px30px; }
    

    .footer-top.post-item.footer-postli {
    

    padding: 10px0; }
    

    .footer-top.post-item.footer-postli:last-child {
    

    padding-bottom: 0; }
    

    .footer-top.post-item.footer-postli:hover.post-thumbaimg {
    

    transform: scale(1.06); }
    

    .footer-top.post-item.footer-postli:hover.post-contenth5a {
    

    color: #5d9913; }
    

    .footer-top.post-item.footer-postli.post-thumb {
    

    overflow: hidden;
    

    border-radius: 4px;
    

    margin-right: 17px; }
    

    .footer-top.post-item.footer-postli.post-thumbaimg {
    

    -webkit-transition: all0.3sease;
    

    -moz-transition: all0.3sease;
    

    transition: all0.3sease; }
    


    2.
 

Js Structure

We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

Js Fiile Included

  • jquery.js used
  • fontawesome.js used
  • jquery.counterup.min.js used
  • jquery.easing.js used
  • slick.min used
  • lightcase.js used
  • aos.js used
  • map-custom.js used
  • circular-countdown.js used
  • jquery.countdown.js used
  • waypoints.min.js used
  • bootstrap.min.js used
  • isotope.pkgd.min.js used
  • wow.min.js used
  • theia-sticky-sidebar.js used
  • swiper.min.js used
  • functions.js used
  • and some other necessary css files 
functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
	
 


    

  1. 

    (function($){
    

    "use strict";
    

    $(document).ready(function(){
    

    // lightcase
    

    $('a[data-rel^=lightcase]').lightcase();
    

    window.FontAwesomeConfig = {
    

    searchPseudoElements:true
    

    }
    

    // search & cart option
    

    $(document).on('click','.search-cart .search i, .search-close',function(){
    

    $(".search-area").toggleClass("open");
    

    });
    

    

    // scroll up start here
    

    $(document).ready(function(){
    

    //Check to see if the window is top if not then display button
    

    $(window).scroll(function(){
    

    if ($(this).scrollTop() >300) {
    

    $('.scrollToTop').css({'bottom':'2%', 'opacity':'1','transition':'all .5s ease'});
    

    } else {
    

    $('.scrollToTop').css({'bottom':'-30%', 'opacity':'0','transition':'all .5s ease'})
    

    }
    

    });
    

    //Click event to scroll to top
    

    $('.scrollToTop').click(function(){
    

    $('html, body').animate({scrollTop :0},500);
    

    returnfalse;
    

    });
    

    });
    

    //menu top fixed start
    

    varfixed_top=$(".header-bottom");
    

    $(window).on('scroll', function () {
    

    if ($(this).scrollTop() >130) {
    

    fixed_top.addClass("menu-fixed animated fadeInDown");
    

    fixed_top.removeClass("slideInUp");
    

    $('body').addClass("body-padding");
    

    } else {
    

    fixed_top.removeClass("menu-fixed fadeInDown");
    

    fixed_top.addClass("slideInUp");
    

    $('body').removeClass("body-padding");
    

    }
    

    });
    

    //menu top fixed end
    

    // menu icon releted
    

    $(".main-menu>li>.submenu").parent("li").children("a").addClass("dd-icon-down");
    

    $(".m-menu>li>.m-submenu").parent("li").children("a").addClass("dd-icon-down");
    

    $(".main-menu>li>.submenu .submenu").parent("li").children("a").addClass("dd-icon-right");
    

    $(".m-menu>li>.m-submenu .m-submenu").parent("li").children("a").addClass("dd-icon-down");
    

    $(".shop-menu>li .shop-submenu").parent("li").children("a").addClass("dd-icon-down");
    

    // mobile menu responsive
    

    $(document).on('click','.header-bar',function(){
    

    $(".header-bar").toggleClass("close");
    

    $(".menu").toggleClass("open");
    

    });
    

    //mobile drodown menu display
    

    $('.mobile-menu-area .m-menu li a').on('click', function(e) {
    

    varelement=$(this).parent('li');
    

    if (element.hasClass('open')) {
    

    element.removeClass('open');
    

    element.find('li').removeClass('open');
    

    element.find('ul').slideUp(1000,"swing");
    

    }
    

    else {
    

    element.addClass('open');
    

    element.children('ul').slideDown(1000,"swing");
    

    element.siblings('li').children('ul').slideUp(1000,"swing");
    

    element.siblings('li').removeClass('open');
    

    element.siblings('li').find('li').removeClass('open');
    

    element.siblings('li').find('ul').slideUp(1000,"swing");
    

    }
    

    });
    

    // drop down menu width overflow problem fix
    

    $('ul').parent().hover(function() {
    

    varmenu=$(this).find("ul");
    

    varmenupos=$(menu).offset();
    

    if (menupos.left +menu.width() >$(window).width()) {
    

    varnewpos=-$(menu).width();
    

    menu.css({ left:newpos });
    

    }
    

    });
    

    // sticky-widget
    

    $(document).ready(function() {
    

    $('.sticky-widget').theiaStickySidebar();
    

    });
    

    jQuery(window).on('load',function() {
    

    var$grid=$('.portfolio .portfolio-wrapper').isotope({
    

    itemSelector:'.post-thumb',
    

    masonry: {
    

    columnWidth:0,
    

    horizontalOrder:false,
    

    }
    

    });
    

    });
    

    // product slider
    

    varswiper=newSwiper('.product-slider', {
    

    slidesPerView:1,
    

    spaceBetween:20,
    

    pagination: {
    

    el:'.product-pagination',
    

    clickable:true,
    

    },
    

    speed:1200,
    

    autoplay: {
    

    delay:3200,
    

    disableOnInteraction:false,
    

    },
    

    loop:true
    

    });
    


    2. 


	
 
 

Google Map

We have attached Google Map and Contact form on the contact us pages.

To customize Google Map, go to the bottom of   contact.html    and find the code block below

 

	
 

	
    
	
  1. 
	// google maps
	
             {
    
	
             "featureType": "administrative",
    
	
             "elementType": "geometry.fill",
    
	
             "stylers": [
    
	
             {
    
	
             "color": "#000000"
    
	
             },
    
	
             {
    
	
             "lightness": 20
    
	
             }
    
	
             ]
    
	
             },
    
	
             {
    
	
             "featureType": "administrative",
    
	
             "elementType": "geometry.stroke",
    
	
             "stylers": [
    
	
             {
    
	
             "color": "#000000"
    
	
             },
    
	
             {
    
	
             "lightness": 17
    
	
             },
    
	
             {
    
	
             "weight": 1.2
    
	
             }
    
	
             ]
    
	
             },
    
	
             {
    
	
             "featureType": "landscape",
    
	
             "elementType": "geometry",
    
	
             "stylers": [
    
	
             {
    
	
             "color": "#000000"
    
	
             },
    
	
             {
    
	
             "lightness": 20
    
	
             }
    
	
             ]
    
	
             },
    
	
    2. 
	

	
 

 

Edit  Latitude and  Longitude accordingly as your requirements see the line

	
 

    center: [lat: 23.739257,90.3869883],
    
 
 
	
 

    icon: 'assets/images/map/01.png'
    
 

 

Credits

jQuery
CSS & Fonts